Skip to main content

Application Builder

The Application Builder is a revolutionary, recipe-driven interface for composing applications from modular bundles. It represents the pinnacle of Jony Ive-level UX design, making complex application assembly as intuitive as selecting ingredients for a recipe.

Overview​

The Application Builder transforms the traditionally complex process of application development into an elegant, visual experience. Users can select from pre-built bundles, see live previews of their selections, and generate complete, production-ready applications with a single click.

Features​

🎨 Beautiful Bundle Selection​

  • Interactive cards with smooth hover animations
  • Real-time visual feedback with cyan glow effects
  • Clear, descriptive bundle information
  • Color-coded bundle categories

⚡ Live Preview​

  • Instant feedback on selected bundles
  • Clear overview of application composition
  • Badge-based bundle identification

🔗 Seamless Integration​

  • Fully integrated with the LCARS dashboard system
  • Uses @valkyr/component-library components
  • Follows established design patterns
  • RBAC-aware (admin-only access)

📦 Available Bundles​

Core Bundle​

Essential foundation for all applications

  • Principal (user/service/agent identity)
  • UserPreference (settings and customization)
  • Address and Organization management
  • Complete RBAC system (Role, Authority, ACL)

Ecommerce Bundle​

Complete commerce solution

  • Product catalog with categories and tags
  • Order management (SalesOrder, Lineitem)
  • Invoice generation and tracking
  • Rich product content support

Rating Bundle​

Feedback and satisfaction

  • ProductRating for customer satisfaction
  • CSAT (Customer Satisfaction) tracking
  • AI fine-tuning feedback integration
  • Comprehensive rating analytics

Marcomm Bundle​

Marketing and communication

  • Content management and publishing
  • Email automation workflows
  • Agentic task automation
  • Event logging and tracking

Admin Bundle​

Administrative tools

  • Customizable dashboards
  • Usage meters and analytics
  • Admin tool widgets
  • All components are RBAC-aware

Docusaurus Site Bundle​

Documentation template

  • Ready-to-use Docusaurus site
  • Component library documentation
  • Valkyr branding and best practices
  • Markdown/MDX support

Usage​

Access the Builder​

The Application Builder is available to admin users through the dashboard sidebar:

  1. Open the LCARS dashboard
  2. Click "Application Builder" in the sidebar (admin-only)
  3. Select your desired bundles
  4. Click "Build Application" to generate

Bundle Selection Process​

  1. Browse Available Bundles: Each bundle is displayed as an interactive card with clear descriptions
  2. Select Bundles: Click "Add" to include a bundle in your application
  3. Live Preview: See your selections in real-time with color-coded badges
  4. Generate Application: Click the "Build Application" button to create your app

Future Integration​

The Application Builder is designed to integrate with:

  • ThorAPI bundler for spec assembly
  • Maven build system for code generation
  • Automated deployment pipelines
  • Component library generation

Technical Details​

Component Architecture​

const ApplicationBuilder: React.FC = () => {
  const [selectedBundles, setSelectedBundles] = useState<string[]>(["core"]);
  
  // Bundle selection logic
  const toggleBundle = (id: string) => {
    setSelectedBundles((prev) =>
      prev.includes(id) ? prev.filter((b) => b !== id) : [...prev, id]
    );
  };
  
  // Render bundle cards with interactive selection
  // ...
};

Bundle Definitions​

Each bundle is defined with:

  • Unique identifier
  • Display name and description
  • Color theme for visual consistency
  • OpenAPI schema definitions (in thorapi/src/main/resources/openapi/bundles/)

LCARS Integration​

The Application Builder follows LCARS design principles:

  • Consistent color scheme with accent bars
  • Smooth animations and transitions
  • High contrast for accessibility
  • Futuristic, minimal aesthetic

Best Practices​

Bundle Composition​

  • Always include Core: The Core bundle provides essential identity and RBAC functionality
  • Choose complementary bundles: Select bundles that work well together (e.g., Ecommerce + Rating)
  • Consider your use case: Match bundle selection to your application requirements

UX Guidelines​

  • Start simple: Begin with Core + one feature bundle
  • Iterate gradually: Add bundles as your application grows
  • Test combinations: Verify bundle compatibility before building

Development Workflow​

  1. Design your application architecture
  2. Select appropriate bundles in the Application Builder
  3. Generate the initial codebase
  4. Customize and extend as needed
  5. Deploy using standard CI/CD practices

Roadmap​

Planned Enhancements​

  • Bundle Preview: Visual mockups of generated applications
  • Dependency Resolution: Automatic inclusion of required bundles
  • Custom Bundle Creation: Build your own reusable bundles
  • Version Management: Support for different bundle versions
  • Integration Testing: Automated compatibility testing between bundles